<?php
/**
 * 文章详情页侧边栏模板
 */
?>

<div class="space-y-6">
    <!-- 作者信息卡片 -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
                <?php echo get_avatar(get_the_author_meta('ID'), 64, '', '', array(
                    'class' => 'w-16 h-16 rounded-full border-2 border-white shadow-md'
                )); ?>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">
                        <?php the_author(); ?>
                    </h3>
                    <p class="text-sm text-gray-500">
                        <?php echo get_the_author_meta('description') ?: '暂无介绍'; ?>
                    </p>
                </div>
            </div>
            <div class="flex items-center justify-between text-sm text-gray-500">
                <div class="flex items-center gap-1">
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                    <span><?php echo count_user_posts(get_the_author_meta('ID')); ?> 篇文章</span>
                </div>
                <div class="flex items-center gap-1">
                    <i data-lucide="eye" class="w-4 h-4"></i>
                    <span><?php echo get_author_posts_views(); ?> 阅读</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 目录导航 -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-4 border-b border-gray-100">
            <h3 class="text-sm font-medium text-gray-900">文章目录</h3>
        </div>
        <div class="p-4">
            <div id="post-toc" class="text-sm space-y-2 max-h-[calc(100vh-400px)] overflow-y-auto">
                <!-- 目录内容将由 JavaScript 动态生成 -->
            </div>
        </div>
    </div>

    <!-- 热门文章 -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-4 border-b border-gray-100">
            <h3 class="text-sm font-medium text-gray-900">热门文章</h3>
        </div>
        <div class="divide-y divide-gray-100">
            <?php
            $popular_posts = new WP_Query(array(
                'posts_per_page' => 5,
                'meta_key' => 'post_views',
                'orderby' => 'meta_value_num',
                'order' => 'DESC'
            ));
            
            if ($popular_posts->have_posts()) :
                while ($popular_posts->have_posts()) : $popular_posts->the_post();
            ?>
            <a href="<?php the_permalink(); ?>" 
               class="flex items-start gap-3 p-4 hover:bg-gray-50 transition-colors">
                <?php if (has_post_thumbnail()) : ?>
                <div class="w-16 h-16 flex-shrink-0 rounded-lg overflow-hidden">
                    <?php the_post_thumbnail('thumbnail', array('class' => 'w-full h-full object-cover')); ?>
                </div>
                <?php endif; ?>
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
                        <?php the_title(); ?>
                    </h4>
                    <div class="flex items-center gap-2 text-xs text-gray-500">
                        <span><?php echo get_post_views(); ?> 阅读</span>
                        <span>•</span>
                        <span><?php echo get_comments_number(); ?> 评论</span>
                    </div>
                </div>
            </a>
            <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </div>

    <!-- 标签云 -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-4 border-b border-gray-100">
            <h3 class="text-sm font-medium text-gray-900">热门标签</h3>
        </div>
        <div class="p-4">
            <div class="flex flex-wrap gap-2">
                <?php
                $tags = get_tags(array('orderby' => 'count', 'order' => 'DESC', 'number' => 20));
                if ($tags) :
                    foreach ($tags as $tag) :
                ?>
                <a href="<?php echo get_tag_link($tag->term_id); ?>"
                   class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 
                          text-gray-600 hover:text-gray-900
                          rounded-full transition-colors">
                    <?php echo $tag->name; ?>
                </a>
                <?php
                    endforeach;
                endif;
                ?>
            </div>
        </div>
    </div>
</div>

<script>
// 生成文章目录
document.addEventListener('DOMContentLoaded', function() {
    const content = document.querySelector('.prose');
    const toc = document.getElementById('post-toc');
    if (!content || !toc) return;

    const headings = content.querySelectorAll('h2, h3, h4');
    if (headings.length === 0) {
        toc.innerHTML = '<p class="text-gray-500">暂无目录</p>';
        return;
    }

    const tocHtml = Array.from(headings).map((heading, index) => {
        const id = `heading-${index}`;
        heading.id = id;
        const level = parseInt(heading.tagName.charAt(1)) - 2;
        const indent = level * 16;
        
        return `
            <a href="#${id}" 
               class="block py-1 pl-${indent} hover:text-blue-600 transition-colors
                      ${level === 0 ? 'font-medium' : 'text-gray-500'}"
               style="margin-left: ${indent}px">
                ${heading.textContent}
            </a>
        `;
    }).join('');

    toc.innerHTML = tocHtml;
});
</script> 